<template>
	<view class="layout">
		<view class="" v-if="loadingStatus">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="container" v-else>
			<view class="header">
				<text class="title">{{detailObj.title}}</text>
				<view class="meta">
					<text class="author">{{detailObj.author}}</text>
					<uni-dateformat class="date" :date="detailObj.createTime" format='yyyy年MM月dd日 hh:mm:ss'
						:threshold="[0,3600000]"></uni-dateformat>
				</view>
			</view>
			<view class="content">
				<text>{{detailObj.content}}</text>
			</view>
			<view class="imgs"  v-if="detailObj.picUrls && detailObj.picUrls.length">
				<image v-for="item in detailObj.picUrls" :src="item" mode="aspectFit"></image>
			</view>
			<view class="actions">
				<button @click="editItem" size="mini">修改</button>
				<button @click="deleteItem" type="warn" size="mini">删除</button>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:"",
				detailObj: {},
				loadingStatus: false

			}
		},
		onLoad(e) {
			console.log("e", e);
			this.id = e.id
			// this.getDetial()


		},
		onShow() {
this.getDetial()
		},

		methods: {

			getDetial() {
				this.loadingStatus = true
				uniCloud.callFunction({
					name: "get_article_detail",
					data: {
						id:this.id
					}
				}).then(res => {
					console.log("res", res);
					this.detailObj = res.result.data[0]
					uni.setNavigationBarTitle({
						title: this.detailObj.title
					});
					console.log("detailObj", this.detailObj);
					this.loadingStatus = false


				})
			},
			editItem() {
				// 跳转到编辑页面
				uni.navigateTo({
					url: `/pages/edit/edit?id=${this.detailObj._id}`
				});
			},
			deleteItem() {
				const id = this.detailObj._id
				console.log("id", id);
				// 删除逻辑
				uni.showModal({
					title: '提示',
					content: '确定要删除这条记录吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('删除成功');
							// 这里可以添加删除数据的逻辑
							uniCloud.callFunction({
								name: "delete_article",
								data: {
									id
								}
							}).then(res => {
								console.log("删除成功");
								uni.showToast({
									title: "删除成功",
									icon: "success"
								})
							})



							uni.navigateBack();
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.layout {
		padding: 30rpx;
		background-color: #fff;

		.header {
			margin-bottom: 20rpx;

			.title {
				font-size: 45rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.meta {
				margin: 30rpx 0;
				display: flex;
				// justify-content: space-between;
				font-size: 30rpx;
				color: #666;

				.author {
					// 作者样式
					margin-right: 20rpx;
				}

				.date {
					// 日期样式
				}
			}
		}

		.content {
			margin-bottom: 20rpx;
			font-size: 35rpx;
			color: #333;
			line-height: 1.5;
		}

		.actions {
			margin-top: 40rpx;

			button {
				&:first-child {
					margin-right: 20rpx;
				}
			}
		}
	}
</style>